let messageCards = document.getElementsByClassName('message'),
    buttonBox = document.getElementsByClassName('buttonBox')[0],
    buttons = buttonBox.getElementsByTagName('img'),
    imgs = document.getElementsByClassName('imgBox')[0].children;
const IMG_WIDTH = 150, // 非活跃状态img宽度
      IMG_HEIGHT = 110, // 非活跃状态img高度
      CENTER_IMG_WIDTH = 330, // center图片宽度
      CENTER_IMG_HEIGHT = 220, // center图片高度
      IMGBOX_WIDTH = parseFloat(window.innerWidth) * 0.75, // 海报图片盒子宽度，用于计算img偏移量
      CENTER_IMG_LEFT = IMGBOX_WIDTH * 0.5 - CENTER_IMG_WIDTH / 2, // center图片左偏移量
      BTNBOX_LEFT = parseFloat(window.innerWidth) * 0.5, // LOGO盒子居中位置，用于计算偏移量
      BTN_WIDTH = 110, // 非活跃状态LOGO宽度加上右margin值，用于计算偏移量
      BTN_WIDTH_ACTIVE = 60, // 活跃状态LOGO宽高
      CARD_BOX_WIDTH = parseFloat(window.innerWidth) * 0.36; // message盒子宽度
let isClick = true, // 用于阻止连击出bug
    isHover = true, // 用于阻止'凌波微步'
    beforeClick = 0, // 判断当前点击是否与上次点击相同
    clickTime = 0; // 判断是否为首次打开页面阻止动画
let before = left = center = right = after = 0;

/**
 * foot 点击元素的下标
 * Time 动画执行时长
 *
 * @param {number} foot
 * @param {number} Time
 */
function click(foot, Time) {
  btnChange(foot, Time);
  changeCard(foot, Time);
  changeImg(foot, Time);
}

/**
 * 改变海报图片状态
 * 
 * i 点击LOGO的下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function changeImg(i, time) {
  if(clickTime != 0 && i != beforeClick) {
    if(i > 0) {
      left_img_animate(i - 1, time);
      imgs[i - 1].className = 'left';
      if(i > 1) {
        before_img_animate(i - 2, time);
        imgs[i - 2].className = 'before';
      }
    }else if(i == 0) {
      left_img_animate(imgs.length - 1, time);
      imgs[imgs.length - 1].className = 'left';
      before_img_animate(imgs.length - 2, time);
      imgs[imgs.length - 2].className = 'before';
    }
    center_img_animate(i, time);
    imgs[i].className = 'center';
    if(i < imgs.length - 1) {
      right_img_animate(i + 1, time);
      imgs[i + 1].className = 'right';
      if(i < imgs.length - 2) {
        after_img_animate(i + 2, time);
        imgs[i + 2].className = 'after';
      }
    }else if(i == imgs.length - 1) {
      right_img_animate(0, time);
      imgs[0].className = 'right';
      after_img_animate(1, time);
      imgs[1].className = 'after';
    }

    for(let j = 0; j < imgs.length; j ++) {
      if(j != before && j != left && j != center && j != right && j != after) {
        imgs[j].className = '';
        $(imgs[j]).animate({
          opacity: 0
        }, time);
      }
    }
  }
}

/**
 * 向左移动时,原左边位置img消失动画
 * 
 * i 需改变状态的HTML元素下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function before_img_animate(i, time) {
  if(imgs[i].className != 'before' && imgs[i].className != 'after')
    $(imgs[i]).animate({
      opacity: 0,
      zIndex: 100
    }, time);
  before = i;
}

/**
 * img的左移动画
 * 
 * i 需改变状态的HTML元素下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function left_img_animate(i, time) {
  if(imgs[i].className === 'right'|| imgs[i].className === 'after' || imgs[i].className === 'before') {
    $(imgs[i]).animate({
      width: IMG_WIDTH + 'px',
      height: IMG_HEIGHT + 'px',
      left: (IMGBOX_WIDTH - IMG_WIDTH)/ 2 + 'px',
      opacity: 0
    }, time/2).animate({
      width: IMG_WIDTH + 'px',
      height: IMG_HEIGHT + 'px',
      left: 0,
      opacity: 0.6,
      zIndex: 888
    }, time/2);
  }else {
    $(imgs[i]).animate({
      width: IMG_WIDTH + 'px',
      height: IMG_HEIGHT + 'px',
      opacity: 0.6,
      left: 0,
      zIndex: 888
    }, time);
  }
  left = i;
}

/**
 * img的居中动画
 * 
 * i 需改变状态的HTML元素下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function center_img_animate(i, time) {
  $(imgs[i]).animate({
    width: CENTER_IMG_WIDTH + 'px',
    height: CENTER_IMG_HEIGHT + 'px',
    left: CENTER_IMG_LEFT + 'px',
    opacity: 1,
    zIndex: 888
  }, time);
  center = i;
}

/**
 * img的右移动画
 * 
 * i 需改变状态的HTML元素下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function right_img_animate(i, time) {
  if(imgs[i].className === 'left' || imgs[i].className === 'before' || imgs[i].className === 'after') {
    $(imgs[i]).animate({
      width: IMG_WIDTH + 'px',
      height: IMG_HEIGHT + 'px',
      left: (IMGBOX_WIDTH - IMG_WIDTH) / 2 + 'px',
      opacity: 0
    }, time/2).animate({
      width: IMG_WIDTH + 'px',
      height: IMG_HEIGHT + 'px',
      left: IMGBOX_WIDTH - IMG_WIDTH + 'px',
      right: 0,
      opacity: 0.6,
      zIndex: 888
    }, time/2);
  }else {
    $(imgs[i]).animate({
      width: IMG_WIDTH + 'px',
      height: IMG_HEIGHT + 'px',
      opacity: 0.6,
      left: IMGBOX_WIDTH - IMG_WIDTH + 'px',
      right: 0,
      zIndex: 888
    }, time);
  }
  right = i;
}

/**
 * 向右移动时,原右边位置img消失动画
 * 
 * i 需改变状态的HTML元素下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function after_img_animate(i, time) {
  if(imgs[i].className != 'after' && imgs[i].className != 'before')
    $(imgs[i]).animate({
      opacity: 0,
      zIndex: 100
    }, time);
  after = i;
}

/**
 * 改变card状态
 * 
 * i 点击LOGO的下标
 * time 动画效果时长
 *
 * @param {number} i
 * @param {number} time
 */
function changeCard(i, time) {
  if(clickTime != 0 && i != beforeClick) {
    for(let j = 0; j < messageCards.length; j ++) {
      if(messageCards[j].className == 'message card_active') {
        message_not_active_animate(messageCards[j], time);
        messageCards[j].className = 'message';
        break;
      }
    }
    message_active_animate(messageCards[i], time);
    messageCards[i].className = 'message card_active';
  }
}

/**
 * 改变card状态动画 ---- 非活跃状态
 * 
 * Element 需改变的HTML元素
 * time 动画效果时长
 *
 * @param {Object} Element
 * @param {number} time
 */
function message_not_active_animate(Element, time) {
  $(Element).animate({
    opacity: 0,
    zIndex: 100
  }, time);
}

/**
 * 改变card状态动画 ---- 活跃状态
 * 
 * Element 需改变的HTML元素
 * time 动画效果时长
 *
 * @param {Object} Element
 * @param {number} time
 */
function message_active_animate(Element, time) {
  $(Element).animate({
    opacity: 1,
    zIndex: 888
  }, time);
}

/**
 * 改变LOGO状态
 * 
 * i 点击元素的下标
 * time 动画执行时长
 *
 * @param {number} i
 * @param {number} time
 */
function btnChange(i, time) {
  for(let j = 0; j < buttons.length; j ++) {
    if(buttons[j].className === 'btn active' && clickTime != 0) {
      btn_not_active_animate(buttons[j], time);
    }
    buttons[j].className = 'btn';
  }
  buttons[i].className = 'btn active';
  btn_active_animate(buttons[i], time);
  $(buttonBox).animate({
    left: BTNBOX_LEFT - i * BTN_WIDTH - BTN_WIDTH_ACTIVE / 2 + 'px'
  },time);
}

/**
 * 改变LOGO状态动画 ---- 活跃状态 悬浮状态
 * 
 * Element 需要改变的HTML元素
 * time 动画执行时长
 *
 * @param {Object} Element
 * @param {number} time
 */
function btn_active_animate(Element, time) {
  if(Element.className === 'btn active') {
    $(Element).animate({
      width: '60px',
      height: '60px',
      top: '-35px',
      left: 0
    },time);
  }else {
    $(Element).animate({
      width: '60px',
      height: '60px',
      top: '-10px',
      left: '-10px'
    },time);
  }
}

/**
 * 改变LOFO状态动画 ---- 非活跃状态 移开状态
 * 
 * Element 需改变状态的HTML元素
 * time 动画执行时长
 *
 * @param {Object} Element
 * @param {number} time
 */
function btn_not_active_animate(Element, time) {
  $(Element).animate({
    width: '40px',
    height: '40px',
    top: 0,
    left: 0
  },time);
}

// 给HTML元素绑定事件
(function btnClick() {
  for(let i = 0; i < buttons.length; i ++) {
    buttons[i].onclick = function () {
      if(isClick && (clickTime == 0 || i != beforeClick)) {
        console.log(i);
        isClick = false;
        click(i, 1000);
        clickTime ++;
        beforeClick = i;
        setTimeout("isClick = true", 1500);
      }
    };
    buttons[i].onmouseover = function () {
      if(buttons[i].className != 'btn active' && isHover) {
        isHover = false;
        btn_active_animate(buttons[i], 250);
        setTimeout("isHover = true", 1000);
      }
    };
    buttons[i].onmouseout = function () {
      if(buttons[i].className != 'btn active') btn_not_active_animate(buttons[i], 250);
    };
    imgs[i].onclick = buttons[i].onclick;
    messageCards[i].onmouseover = function () {
      if(messageCards[i].children[0].clientHeight > messageCards[i].clientHeight) {
        messageCards[i].parentElement.parentElement.style.width = CARD_BOX_WIDTH + 17 + 'px';
        messageCards[i].style.overflow = 'auto';
      }
    };
    messageCards[i].onmouseout = function () {
      messageCards[i].parentElement.parentElement.style.width = CARD_BOX_WIDTH + 'px';
      messageCards[i].style.overflow = 'hidden';
    }
  }
})();

buttons[0].onclick();